import Taro, { Component } from '@tarojs/taro';
import { View ,Input,Label,Text } from '@doctorwork/components';
import { Map } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
import { rewriteAddMTA } from '../../model/utils/rewrite';
import './index.styl';

// let plugin = requirePlugin('routePlan');

@connect(({ station }) => ({
    ...station
}))
@rewriteAddMTA
export default class Station extends Component {
    constructor(props){
        super(props);

        this.state = {

        };
    }
    config = {
        navigationBarTitleText: '附近加油站'
    };


    componentDidShow() {
        this.initStationList();

    }
    /**
     * 获取附近加油站
     * @param {*} params 
     */
    async initStationList(){
        const location = await this.getLocation();
        
        this.props.dispatch({
            type: 'station/init',
            payload: {
                ...location
            }
        });
    }
    getLocation(){
        return new Promise((resolve)=>{
            wx.getLocation({
                type: 'gcj02',
                isHighAccuracy: true,
                success (res) {
                    resolve(res);
                },
                fail: e => {
                    wx.showToast({
                        title: '获取地理位置失败',
                    });
                }
            });
        });
    }

    /**
   * markers点击事件
   */
    onMarkerTap(e){
        var id = e.detail.markerId;
        var {markers} = this.props;
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].id == id) {
                markers[i].iconPath = 'https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/e_life_helper/icon_oli_active.png';
            } else {
                markers[i].iconPath = 'https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/e_life_helper/icon_oli.png';
            }
        }
        this.props.dispatch({
            type: 'station/save',
            payload: {
                activeMarker: id,
                markers
            }
        });
        const active = markers.find(item => item.id == id);

        this.props.dispatch({
            type: 'station/getOilPrice',
            payload: active
        });
    }
    /**
   * 导航按钮
   */
    nav (e) {
        var {markers,activeMarker} = this.props;
        const station = markers[activeMarker];
        wx.openLocation({
            latitude: station.latitude,
            longitude: station.longitude,
            name: station.title,
            address: station.address,
            scale: 14,
        });
    }
    /**
     * 搜索框内容变更
     * @param {*} e 
     */
    inputChange(e){
        const keyword = e.target.value || '加油站';
        const {location} = this.props;
        this.props.dispatch({
            type: 'station/init',
            payload: {
                ...location,
                keyword
            }
        });
    }


    render() {

        const { location, stationList ,markers,activeMarker,price} = this.props;
        return (
            <View className='container'>
                <Navigate
                    title='附近加油站'
                    color='black'
                    backgroundColor='white'
                    backTextColor='black'
                />
                <Input className='search' placeholder='搜索' onChange={this.inputChange.bind(this)}></Input>
                <Map latitude={location.latitude} longitude={location.longitude} markers={markers} scale='14' onMarkerTap={this.onMarkerTap.bind(this)} show-location></Map>
                {
                    stationList && stationList.length ? <View className='info'>
                        <View>
                            <View className='title'>{stationList[activeMarker].title}</View>
                            <View className='address'>{stationList[activeMarker].address}</View>
                            <View className='address'>距离: {stationList[activeMarker]._distance}米</View>

                    
                            <View className='nav' onClick={this.nav.bind(this)} dat-name='开始导航'>
                                <image mode='widthFix' src='https://codermoyv.gitee.io/coder-moyv/assets/images/wechat/e_life_helper/icon_nav.png'></image>
                            </View>
                            <View className='price-item active' >
                                <Label> 92#</Label>
                                <Text>¥{price.oil92/100||'暂无数据'}</Text>
                            </View>
      
                            <View className='price-item' >
                                <Label> 95#</Label>
                                <Text>¥{price.oil95/100||'暂无数据'}</Text>
                            </View>

                            <View className='price-item' >
                                <Label> 98#</Label>
                                <Text>¥{price.oil98/100||'暂无数据'}</Text>
                            </View>
                            <View className='address'>以上油价仅作参考,具体根据优惠活动而定</View>
                        </View>
                    </View> : 
                        <View className='info'>
                            <View className='title'>暂无结果, 请重新搜索</View>

                        </View>
                }


            </View>

        );
    }
}
